<div id="style_container"></div>
<script>
    var component_array = [];
    var temp = [];
    var array = editor.getValue().split("end-->");
    array.forEach(element => {
        temp = element.split("<!--");
        console.log(temp[temp.length - 1])
    });
</script>

<script>
    var select_html=get_selected_content()
    console.log(select_html)
    $("#style_container").load("https://res.dcdev.net/dcdev/v1.0.8/assets/html/render_inputor.html", "",
        function () {
            data = { 
                // 容器div的id
                id: "style_container",
                // x表示横向滚动、y表示竖向滚动
                direction: "y",
                // 每个ul的配置
                ul_config: {
                    ul_class: "",
                    ul_style: "margin-left: 10px;clear:both;",
                },
                //是否需要按钮
                btn: '修改',
                // 每个li的配置
                li_config: {
                    // td 的函数配置
                    li_function: [],
                    /*
                        字段变量使用 # 而不是 $ 来定义
                        如需唯一标识某个node，则添加data-key以作区分
                        如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                    */
                    li_html: `   
<div>
    <img data-key=image src="#{type}" style="width:40px;height:40px;">
    <div data-key=title style="font-size:12px;color:gray;">#{min}</div>
</div>
    `,
                    li_style: "margin-top:10px;margin-bottom:10px ;"
                },
                // 各种类型的回调
                cb_config: {
                    // 点击的回调
                    click: function (res) {
                        console.log(res);
                    },
                    click_btn: function (res) {
                        console.log(res);
                    },
                    // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                    data_fetched: function (res) {
                        // console.log(res);
                    },
                    // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                    before_render: function (res) {
                        // console.log(res);
                    },
                    // 所有数据加载完毕的回调
                    no_more: function (res) {
                        // console.log(res);
                    },
                    value_changed: function (res) {
                        console.log(res)
                        var setting = component_style_setting.get_data();
                        var element = "";
                        var style = "";
                        var element_html = "";
                        for (const key in setting) {
                            if (setting.hasOwnProperty(key)) {
                                element = setting[key];
                                switch (key) {
                                    case "margin-left":
                                        element = `${element}px`;
                                        break;
                                    case "margin-right":
                                        element = `${element}px`;
                                        break;
                                    case "margin-top":
                                        element = `${element}px`;
                                        break;
                                    case "margin-bottom":
                                        element = `${element}px`;
                                        break;
                                    default:
                                        break;
                                }
                                style += `${key}:${element};`;
                            }
                        }
                        switch (res.data.column_name) {
                            case "font-size":
                                element_html = `<a style="${res.data.column_name}:${res.new_value}">default_value</a>`
                                break;
                            case "color":
                                element_html = `<a style="${res.data.column_name}:${res.new_value}">default_value</a>`
                                break;
                            default:
                                break;
                        }
                        var html = `
                        <div style="${style}">
                        <a style="color:red;">adsf</a>
                        </div>
                        ` // 调用父窗口函数
                        // window.parent["insert_to_code_editor"](element_html, html, true);
                        get_selected_content()
                        insert_to_editor(html)
                    }
                },
                // 请求及分页的配置
                data_config: {
                    data: [
                        {
                            type: "html",
                            html: `<h2 style="font-size: 30px;">字体</h2>`,
                        },
                        {
                            type: "number",
                            title: "字体大小",
                            column_name: "font-size",
                            is_require: true,
                            default_value: 5,
                            num_type: "整型",
                            unit: "px",
                            max_value: 200,
                            min_value: 10,
                        },
                        {
                            type: "color",
                            title: "背景颜色",
                            column_name: "background-color",
                            is_require: false,
                            default_value: "white",
                            color_type: ["black", "gray", "white"]

                        },
                        {
                            type: "html",
                            html: `===============================`,
                        },
                        {
                            type: "html",
                            html: `<h2 style="font-size: 30px;">位置</h2>`,
                        },
                        {
                            type: "option",
                            title: "定位",
                            column_name: "position",
                            is_require: false,
                            default_value: "相对",
                            options: ['relative', 'absolute',],
                            options_title: ['relative', 'absolute',]

                        },
                        {
                            type: "option",
                            title: "浮动",
                            column_name: "float",
                            is_require: false,
                            default_value: "左",
                            options: ['left', 'right',],
                            options_title: ['left', 'right',]

                        },
                        {
                            type: "option",
                            title: "对齐",
                            column_name: "align",
                            is_require: false,
                            default_value: "",
                            options: ['center', 'left', 'right'],
                            options_title: ['center', 'left', 'right']

                        },
                        {
                            type: "option",
                            title: "显示",
                            column_name: "display",
                            is_require: false,
                            default_value: "",
                            options_title: ['内联元素', 'flex', '不显示'],
                            options: ['inline', 'flex', 'none']

                        },
                        {
                            type: "option",
                            title: "flex-方向",
                            column_name: "flex-direction",
                            is_require: false,
                            default_value: "",
                            options_title: ['横向', '竖向'],
                            options: ['row', 'column']

                        },
                        {
                            type: "option",
                            title: "flex-对齐",
                            column_name: "justify-content",
                            is_require: false,
                            default_value: "左齐",
                            options_title: ['左齐', '居中', '右齐'],
                            options: ['flex-start', 'center', 'flex-end']

                        },
                        {
                            type: "html",
                            html: `===============================`,
                        },
                        {
                            type: "html",
                            html: `<h2 style="font-size: 30px;">距离</h2>`,
                        },
                        {
                            type: "number",
                            title: "外边距",
                            column_name: "margin",
                            is_require: true,
                            default_value: 5,
                            num_type: "整型",
                            unit: "px",
                            max_value: 1000,
                            min_value: 0,
                        },
                        {
                            type: "number",
                            title: "内边距",
                            column_name: "padding",
                            is_require: true,
                            default_value: 5,
                            num_type: "整型",
                            unit: "px",
                            max_value: 1000,
                            min_value: 0,
                        },
                        {
                            type: "text",
                            title: "width",
                            column_name: "width",
                            is_require: false,
                            default_value: "100%",
                            is_multi_line: false,
                            place_holder: "支持 % px rem 。。。",
                            style: `width:100px;`
                            // max_value: 50,
                            // min_value: 5,
                            // hidden: true
                        },
                        {
                            type: "html",
                            html: `===============================`,
                        },
                        // {
                        //     type: "color",
                        //     title: "颜色1",
                        //     column_name: "color1",
                        //     is_require: false,
                        //     default_value: "#ddd",
                        //     color_type: ["#1296db", "gray", "#93ab32"]

                        // },
                        // {
                        //     type: "color",
                        //     title: "颜色2",
                        //     column_name: "color2",
                        //     is_require: true,
                        //     default_value: "#ddd",
                        //     color_type: ["#8296db", "gray", "#93ab32"]

                        // }, {
                        //     type: "text",
                        //     title: "文本型244",
                        //     column_name: "title",
                        //     is_require: true,
                        //     default_value: "",
                        //     is_multi_line: true,
                        //     place_holder: "占位符",
                        //     max_value: 50,
                        //     min_value: 5,
                        //     hidden: true
                        // },
                        // {
                        //     type: "html",
                        //     html: `<hr style="width:600px;"><button>abcdeflkjweriou</button>`,
                        // },
                        // {
                        //     type: "text",
                        //     title: "文本型22",
                        //     column_name: "title1",
                        //     is_require: false,
                        //     default_value: "默认值",
                        //     is_multi_line: false,
                        //     place_holder: "占位符",
                        //     max_value: 20,
                        //     min_value: 2,
                        // },
                        // {
                        //     type: "date",
                        //     title: "日期型",
                        //     column_name: "date",
                        //     is_require: true,
                        //     default_value: "",
                        //     place_holder: "占位符",
                        //     start_date_value: '2002-01-01',
                        //     end_date_value: '2020-06-07',
                        // }, {
                        //     type: "number",
                        //     title: "数值型",
                        //     column_name: "number",
                        //     is_require: true,
                        //     default_value: 5,
                        //     num_type: "整型",
                        //     unit: "个",
                        //     max_value: 20,
                        //     min_value: 2,
                        // }, {
                        //     type: "bool",
                        //     title: "开关型",
                        //     column_name: "bool",
                        //     is_require: false,
                        //     default_value: true,
                        //     tvalue: true,
                        //     fvalue: false,
                        //     ttitle: "是",
                        //     ftitle: "否",
                        // }, {
                        //     type: "option",
                        //     title: "单选型",
                        //     column_name: "option",
                        //     is_require: false,
                        //     default_value: '选项2',
                        //     options: ['选项1', '选项2', '选项3', ],
                        //     options_title: ['选项1', '选项2', '选项3', ]
                        // }, {
                        //     type: "checkbox",
                        //     title: "多选型",
                        //     column_name: "checkbox",
                        //     is_require: false,
                        //     default_value: '选项1',
                        //     options: ['选项1', '选项2', '选项3', ],
                        //     options_title: ['选项1', '选项2', '选项3', ]
                        // }, {
                        //     type: "image",
                        //     title: "图片型",
                        //     column_name: "image",
                        //     is_require: true,
                        //     default_value: "https://www.dcdev.net/icon.png",
                        //     has_thumb: true,
                        //     thumb_default_value: "https://www.dcdev.net/icon.png"
                        // }, {
                        //     type: "image",
                        //     title: "图片型2",
                        //     column_name: "image2",
                        //     is_require: false,
                        //     default_value: "https://www.dcdev.net/icon.png",
                        //     has_thumb: true,
                        //     thumb_default_value: "https://www.dcdev.net/icon.png"
                        // }
                    ],
                },
            };
            component_style_setting = new render_inputor();
            component_style_setting.render(data, null, null);
        });


</script>
<!-- <script>
    var checknode = [];
    var checktitle = [];
    var checktype = "";
    var body_node_list = null;
    var body_compost_func = null;
    //样式表格
    function show_style_form() {
        loadJs(`https://res.dcdev.net/dcdev/v1.0.8/part/body_part.js`, function () {
            // 节点处理
            body_node_list = _dc_body_part.node_list;
            body_node_list_html = "";
            body_compost_func_html = "";
            for (const key in body_node_list) {
                if (body_node_list.hasOwnProperty(key)) {
                    const element = body_node_list[key];
                    body_node_list_html +=
                        `<input type="radio" lay-filter="body_attribute" name="body_attribute" value="${key}" title="${key}">`
                    // `<button onclick="get_html_tag_name('body_node_list_attribute','${key}')" style="margin-right:5px;margin-bottom:5px;">${key}</button>`
                }
            }
            $("#body_node_list").html(body_node_list_html)

            // 组合功能
            body_compost_func = _dc_body_part.compost_func;
            for (const key in body_compost_func) {
                if (body_compost_func.hasOwnProperty(key)) {
                    const element = body_compost_func[key];
                    body_compost_func_html +=
                        `<input type="radio" lay-filter="body_compost" name="body_compost" value="${key}" title="${key}">`
                    // `<button onclick="get_html_tag_name('body_node_list_attribute','${key}')" style="margin-right:5px;margin-bottom:5px;">${key}</button>`
                }
            }
            $("#body_compost_func").html(body_compost_func_html)
            // layui.form.render()
        })
        $("#style_container").html(`<div id="body_node_list" class="layui-form"
                                                style="display: -webkit-inline-box;width:100%">
                                            </div>
                                            <div class="layui-form body_node_list_attribute" style="display: none;"><table class="layui-table">
                                                    <thead>
                                                        <tr>
                                                            <th>节点类型</th>
                                                            <th>默认值</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="body_node_list_attribute">
                                                    </tbody>
                                                </table>
                                                </div>
                                                <div style="width: 100%;text-align: right;">
                                                    <label
                                                        style="color: #1296db;font-size: 12px;float: left;">先选中多个标签之后操作</label><br>
                                                    <label style="width: 100%;" class="dcdev-title">节点style</label>
                                                    <input id="line_style"
                                                        style="width: 100%;height:44px;margin-bottom: 10px" />
                                                    <button id="body_node_list_submit">确定</button>
                                                </div>`)
        layui.use(['element', 'form', "table", "layer", "colorpicker"], function () {
            form = layui.form;
            table = layui.table;
            element = layui.element;
            colorpicker = layui.colorpicker;
            form.render();
            table.render();
            element.render();
            form.on("radio(body_compost)", function (obj) {
            })
            form.on("radio(body_attribute)", function (obj) {
                checktype = obj.value;
                $("#line_style").val("")
                var attributedata = body_node_list[obj.value]['default'][0];
                var body_node_list_attribute_html = "";
                for (k in attributedata) {
                    body_node_list_attribute_html += `<tr><td data-node="${k}" data-key="${obj.value}" onmouseover="showNodeTips(this)">
                    <input type="checkbox" lay-filter="body_attribute_node" name="body_attribute_node" lay-skin="primary"  value="${attributedata[k]}" title="${k}">
                    </td>
                    <td><div style="font-size:13px">${attributedata[k]}</div></td>
                    </tr>`
                }
                $("#body_node_list_attribute").html(body_node_list_attribute_html)
                form.render()
                $(".body_node_list_attribute").show();
            })
            form.on("checkbox(body_attribute_node)", function (obj) {
                checknode = [];
                checktitle = [];
                var linestyle_html = "";
                $("input:checkbox[name='body_attribute_node']:checked").each(function (i) {
                    checknode.push($(this).val());
                    checktitle.push($(this).attr('title'));
                    linestyle_html += `${$(this).attr('title')}="${$(this).val()}" `
                });
                $("#line_style").val(linestyle_html)
            })
        });
        $("#body_node_list_submit").click(function () {
            var attributedata = body_node_list[checktype]['default'][0];
            var checknode_html = `<${checktype} `;
            if ($("#line_style").val() != "") {
                checknode_html += ` ${$("#line_style").val()} `
            } else {
                for (var i = 0; i < checknode.length; i++) {
                    checknode_html += ` ${checktitle[i]}='${checknode[i]}'`
                }
            }
            if (checktype == "input" || checktype == "img") {
                checknode_html += ` />`
            } else if (checktype == "select") {
                checknode_html += `<option value ="option1">option1</option>
            <option value ="option2">option2</option>
            <option value ="option3">option3</option>
            ></${checktype}>`
            } else {
                checknode_html += `>${checktype}</${checktype}>`
            }
            replace_selected_content(checknode_html)
        })
    }

    //鼠标悬浮事件
    function showNodeTips(obj) {
        var node = $(obj).attr('data-node')
        var datakey = $(obj).attr('data-key')
        $(obj).find('.layui-form-checkbox').children("span").eq(0).attr('title', body_node_list[datakey][node +
            '-tips'
        ])
    }
</script> -->
<!-- a start -->

<!-- a end -->

<!-- a end-->

<!-- b start-->

<!-- b end-->

<!-- c start-->

<!-- c end-->